<template>
  <a-drawer :width="700" v-model:visible="cateManageDialog" title="商品类别" placement="right">
    <a-button type="primary" @click="showAddCate = true" v-if="hasPerm('bizItemCategoryAdd')">
      <template #icon><plus-outlined /></template>
      新增类别
    </a-button>
    <a-table :dataSource="cateManageDate.cateDataSource" :columns="cateManageDate.cateColumns"
      :pagination="paginationConfig">
      <template #bodyCell="{ column, record, index }">
        <span v-if="column.dataIndex === 'index'">{{ index + 1 }}</span>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a v-if="hasPerm('bizItemCategoryEdit')" @click="editColums(record)">编辑</a>
            <a-divider type="vertical" v-if="hasPerm(['bizItemCategoryEdit', 'bizItemCategoryDelete'], 'and')" />
            <a-popconfirm title="确定要删除吗？" @confirm="deleteBizGoods(record)">
              <a-button type="link" danger size="small" v-if="hasPerm('bizItemCategoryDelete')">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-drawer>
  <a-modal v-model:visible="showAddCate" title="新增类别" ok-text="保存" cancel-text="取消" @ok="submitModal"
    @cancel="formStateRef.resetFields()">
    <a-form ref="formStateRef" :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }"
      autocomplete="off">
      <a-form-item label="分类序号：" name="sortCode"
        :rules="[{ required: true, message: '必填项不能为空' }, { type: 'number', min: 0 }]">
        <a-input-number style="width: 100%;" v-model:value="formState.sortCode" />
      </a-form-item>
      <a-form-item label="分类名称：" name="categoryName" :rules="[{ required: true, message: '内容不能为空' }]">
        <a-input v-model:value="formState.categoryName" />
      </a-form-item>
      <a-form-item label="描述：">
        <a-textarea v-model:value="formState.description" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import bizGoodsGoodscategoryApi from '@/api/biz/bizGoodsGoodscategoryApi'
let formState = ref({
  categoryName: '',
  sortCode: '',
  description: '',
});
const cateManageDialog = ref(false)
const onOpen = (record) => {
  cateManageDialog.value = true
  loadData()
}
const showAddCate = ref(false)
const formStateRef = ref();
let paginationConfig = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  onChange: (page) => {
    console.log('Page changed to: ', page);
  },
});
const submitModal = () => {
  formStateRef.value.validateFields().then(() => {
    bizGoodsGoodscategoryApi.bizGoodsCategorySubmitForm(formState.value, formState.value.id ? true : false).then(res => {
      showAddCate.value = false
      formStateRef.value.resetFields()
      loadData()
      formState.value = {
        categoryName: '',
        sortCode: '',
        description: '',
      }
    })
  });
};
const editColums = (record) => {
  formState.value = JSON.parse(JSON.stringify(record))
  showAddCate.value = true
}
const cateManageDate = reactive({
  cateDataSource: [],
  cateColumns: [{
    title: '分类序号',
    dataIndex: 'sortCode',
    key: 'sortCode',
  }, {
    title: '类别名称',
    dataIndex: 'categoryName',
    key: 'categoryName',
  }, {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
  }]
})
const loadData = (parameter) => {
  return bizGoodsGoodscategoryApi.bizGoodsCategoryPage(parameter).then((data) => {
    cateManageDate.cateDataSource = data.records
    paginationConfig.current = data.current
    paginationConfig.pageSize = data.size
    paginationConfig.total = data.total
  })
}
const deleteBizGoods = (record) => {
  let parameter = [{ id: record.id }]
  bizGoodsGoodscategoryApi.bizGoodsCategoryDelete(parameter).then((data) => {
    loadData()
  })
}
defineExpose({
  onOpen
})
</script>